<script setup lang="ts">
import { ref, reactive, watch, onMounted } from "vue";
import { getCompanyByIndustrial, getTopIndustrialList, getCompanyList, getIndustrialByPid } from "@/network/api";
import { useRoute } from "vue-router";
import router from "@/router";


const Route = useRoute();

let data = reactive({
  swiperType: false,
  videoTtpeImg: true,
  value1: "" as any,
  value2: "" as any,
  options1: [

  ] as any,
  options2: [

  ] as any,
  page: 1,
  companyList: [] as any,
  count: 0,
  id: (Route.query.id ? Route.query.id : '') as any,
  sonID: (Route.query.sonID ? Route.query.sonID : '') as any
});


data.value1 = Route.query.id ? Number(Route.query.id) : ''
data.value2 = Route.query.sonID ? Number(Route.query.sonID) : ''


watch(
  () => data.value1,
  (val: any) => {
    console.log(val, 'asdads');
    data.value2 = ''
  }
);

/**
      @methods 获取公司列表
    */
const change = async (item: any, type: any) => {
  console.log(item, 'item', 'type', type);
  // return
  if (type == 1) {
    data.value2 = ''
    data.page = 1;

  } else if (type == 2) {
    data.page = 1;

  }

  const { data: companyList } = await getCompanyByIndustrial({ pid: data.value1, industrial_id: data.value2, page: data.page, pageSize: 8 });

  data.companyList = companyList.list;
  data.count = companyList.count;


  getIndustrialByPid({
    pid: data.value1
  }).then(res => {
    if (res.data) {
      data.options2 = res.data
    } else {
      data.options2 = []
    }
  })
};

const handleCompany = (val: number, type: any) => {
  router.push({
    path: "/companyData",
    query: {
      id: val,
      carouselType: type,
    },
  });
};



change(data.sonID ? data.sonID : data.id, data.sonID ? 2 : 1)

const PageChange = (page: any) => {
  console.log(page, "PageChange");
  data.page = page;
  change(1, 0)
}

onMounted(() => {
  getTopIndustrialList().then(res => {
    console.log(res, 'res');
    data.options1 = res.data
  })
});
</script>

<template>
  <div class="content ">
    <div class="bigTitle">相关企业</div>
    <div class="select">

      <el-row :gutter="20">
        <el-col :span="4" :xs="12">
          <el-select @change="change($event, 1)" v-model="data.value1" class="m-2" placeholder="全部" size="large">
            <el-option v-for="item in data.options1" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="4" :xs="12">
          <el-select v-if="data.value1 && data.options2.length" @change="change($event, 2)" v-model="data.value2"
            class="m-2" placeholder="全部" size="large">
            <el-option v-for="item in data.options2" :key="item.id" :label="item.name" :value="item.id" />
          </el-select></el-col>
      </el-row>

    </div>
    <div class="module2Content">
      <el-row :gutter="48">
        <el-col :span="6" :xs="24" v-for="item in data.companyList" :key="item">
          <div class="cooperate parnterLogo" @click="handleCompany(item.id, true)">
            <div class="imgBox width100">
              <img v-if="item.logo" :src="item.logo" alt="" class="parnterLogoImg width100" />
              <div v-else style="height: 180px;display: flex;justify-content: center;align-items: center;font-size: 20px;background-color: #fff;">
                {{ item.name }}
              </div>
              <div class="industryType">{{ item.cate.name }}</div>
            </div>
            <div class="contentText text_center">{{ item.name }}</div>
          </div>
        </el-col>
      </el-row>
      <div class='flex justify_end width100'>
        <el-pagination layout="total, prev, pager, next, jumper" :page-size="8" :total="data.count"
          @current-change="PageChange" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("@/assets/css/content.css");

.content {
  margin: 0 auto;
  padding-top: 70px;
  padding-bottom: 70px;

  .bigTitle {
    margin-bottom: 30px;
  }

  .select {
    margin-bottom: 30px;
  }

  .module2Content {
    .parnterLogo {
      margin: 0 0px 50px 0px;
      // cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .imgBox {
      position: relative;
      overflow: hidden;

      .industryType {
        background: #085DDE;
        border-radius: 5px;
        min-width: 103px;
        min-height: 33px;
        color: #FFFFFF;
        display: flex;
        font-size: 16px;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 5px;
      }
    }

    img {
      transition: all 0.5s;
    }

    img:hover {
      transform: scale(1.2);
    }
  }
}

@media screen and (max-width: 768px) {}
</style>
